<template>
    <div class="pop-search">
      <div class="search-bar">
        <div class="search-box">
          <input type="search" name="keyword" v-model="keyWord" maxlength="15" placeholder="请输入车名  如奥迪A4L" @keyup.enter="sendKeyword">
        </div>
        <a class="btn cancelSearch" @tap="back">取消</a>
      </div>
      <div class="search-list mui-content mui-scroll-wrapper" style="top:44px;"  id="search">
        <div class="mui-scroll">
          <div class="recommend">
            <div class="carsHistory">
              <div class="title">
                <div class="history">历史搜索</div>
                <div class="clear clearCarHistory" @tap="cleanStorage">
                  <span class="icon-icon--"></span>
                  <div style="display:inline-block">清空</div>
                </div>
              </div>
              <div class="list" id="his">
                <a v-for=" data in searchHistory" @tap="sendHistoryKetWord($event,data.cName)" style="border:1px solid #fff;">{{data.cName}}</a>
              </div>
            </div>
            <div class="hotCars loaded">
              <div class="title">品牌</div>
              <div class="list" style="padding-top:10px;text-align:center;">
                <a v-for=" brand in allDate.carBrands" @tap="sendBrand(brand)" style="border:1px solid #fff;">{{brand.cName}}</a>
                <br>
              </div>
            </div>
            <div class="hotCars loaded">
              <div class="title">车系</div>
              <div class="list" style="padding-top:10px;text-align:center;" id="cx">
                <a  v-for="series in allDate.CarSeries" @tap="sendPrice($event,series.id)" style="border:1px solid #fff;">{{series.name}}</a>
                <br>
              </div>
            </div>
            <div class="hotCars loaded">
              <div class="title">车型</div>
              <div class="list" style="padding-top:10px;text-align:center;">
                  <a v-for="v in motorcycleType" @tap="goModelsOffer(v.id,v.carSriesId)" style="border:1px solid #fff;">{{v.name}}</a>  
                <br>
              </div>
            </div>
          </div>
        </div>
        <dl class="result g-hide"></dl>
      </div>
    </div>
  
</template>
<script>
  import mui from 'static/js/mui'
  import { findCarByCarSeriesId } from '@/api/search'
  import {findBrandOrSeriesByKeywords} from '@/api/search'
  import { Toast, Indicator } from 'mint-ui'
  import storage from '@/utils/localstorage'
  export default {
    data() {
      return {
        cc:false,
        motorcycleType:[],
        keyWord: '',//v-model
        searchHistory: [],//存历史
        allDate: {},//搜索关键词拿过来的数据
        obj:{
              carSeriesId:"",
              carId:"",
              customerId:this.$store.getters.user.id
        }
      };
    },
    props: {},
    watch: {},
    methods: {
      goModelsOffer(carId,carSeriesId){
        // //console.log(this.motorcycleType)// //console.log(carSeriesId)
        this.obj.carSeriesId=carSeriesId
        this.obj.carId=carId
        this.$store.dispatch('showCarDetails',this.obj)
        this.$router.push({
            path: "/modelsOffer",
        })
      },
      back() {
        this.$router.back(-1)
      },
      handleVal(val) {
        this.$router.push({
          path: "/carSeries",
          params: {
            brand:val,
          }
        });
      },
      sendHistoryKetWord(el,name) {
        //这里的意思是当每次点击历史记录的时候 就清空车型列表
        this.motorcycleType=[]
        //重置车系筛选后的样式
        var abiaoqian=document.getElementById('cx').getElementsByTagName("a")
        for(var i=0;i<abiaoqian.length;i++){
          abiaoqian[i].style.border="1px solid #fff"
        }
        var that = this
        var dangqiana= el.target.innerHTML
        var abiaoqian=el.target.parentNode.getElementsByTagName("a")
        for(var i=0;i<abiaoqian.length;i++){
          if(abiaoqian[i].innerHTML===dangqiana){
              el.target.style.border="1px solid #ff6a27"
          }else{
              abiaoqian[i].style.border="1px solid #fff"
          }
        }
        findBrandOrSeriesByKeywords(name).then(resp => {
            //console.log(resp.data)
            that.allDate = resp.data.data
         })
        // this.$router.push({
        //   name: "filter",
        //   params: {
        //     keyword: name,
        //   }
        // })
      },
      sendKeyword() {
        //这里每次输入完 就重置搜索历史的样式 全部变成 边框白色 然后让客户 重新选择
        var abiaoqian=document.getElementById('his').getElementsByTagName("a")
        for(var i=0;i<abiaoqian.length;i++){
          abiaoqian[i].style.border="1px solid #fff"
        }
        var cc=[]
        var bb
        var that = this
        /* 设置json格式的数据 */
        let nameJson = {'cName': this.keyWord, 'create_time': new Date().getTime() }
        let totalNameJson = this.searchHistory.concat(nameJson)
         
        findBrandOrSeriesByKeywords(this.keyWord).then(resp => {
          if(resp.data.data.CarSeries.length===0 && resp.data.data.carBrands.length===0){
              Toast('亲,暂时还没有此款车型')
          }else{
            that.allDate = resp.data.data
            if(storage.getLocalstorage('searchHistory')){//loc有值判断
              // alert(storage.getLocalstorage('searchHistory').length)
              for(var i=0;i<storage.getLocalstorage('searchHistory').length;i++){
                cc.push(that.keyWord===storage.getLocalstorage('searchHistory')[i].cName)
              }
              //console.log(cc)
              for(var j=0;j<cc.length;j++){
                if(cc[j]){
                  // alert("66")
                  bb=true
                  break
                }
              }
              // //console.log(bb)
              if(bb===undefined){
                storage.setLocalstorage('searchHistory', totalNameJson)
                that.searchHistory=storage.getLocalstorage('searchHistory')
              }else{
                // Toast('亲,历史已搜索过')
              }
            }else{//loc没值存
              storage.setLocalstorage('searchHistory', totalNameJson)
              that.searchHistory=storage.getLocalstorage('searchHistory')
            }
            that.allDate = resp.data.data
          }
        })
        // this.$router.push({
        //   name: "filter",
        //   params:{ 
        //       keyword: this.keyWord, 
        //   }
        // })
      },
      sendPrice(el,seriesId) {
        var dangqiana= el.target.innerHTML
        var abiaoqian=el.target.parentNode.getElementsByTagName("a")
        for(var i=0;i<abiaoqian.length;i++){
          if(abiaoqian[i].innerHTML===dangqiana){
              el.target.style.border="1px solid #ff6a27"
          }else{
              abiaoqian[i].style.border="1px solid #fff"
          }
        }
        //console.log(seriesId)
        findCarByCarSeriesId(seriesId).then(resp=>{
          this.motorcycleType=resp.data.cars
        })
        // //console.log(seriesId)
      },
      sendBrand(brand) {
        // //console.log(brand)
        // this.$store.dispatch('closCondition','')
        this.$router.push({
          name: "filter",
          params: {
            brand: brand,
          }
        })
      },
      cleanStorage() {
        //只要清空 那么所有的数据就全部重置
        this.searchHistory = []
         this.motorcycleType=[]
         this.allDate=[]
        storage.removeLocalstorage('searchHistory')
        //window.location.reload()
      }
    },
    filters: {},
    computed: {},
    created() {
      if(storage.getLocalstorage('searchHistory')){
        this.searchHistory=storage.getLocalstorage('searchHistory')
      }
    },
    mounted() { 
      //初始化mui
			mui.init()
			//主界面和侧滑菜单界面均支持区域滚动；
			mui('#search').scroll();
    }
  };

</script>

<style scoped>
  .pop-search .search-bar {
    background-color: #fff;
    position: relative;
    height: 2.2rem;
    line-height: 2.2rem;
  }

  .pop-search .search-bar:before {
    bottom: 0;
    content: "";
    background-color: #e5e5e5;
    height: 1px;
    position: absolute;
    left: 0;
    right: 0;
    -webkit-transform: scaleY(.5);
    transform: scaleY(.5);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
  }

  .pop-search .search-box {
    position: absolute;
    left: .4rem;
    right: 2.8rem;
    padding: 0 .2rem;
    height: 1.4rem;
    line-height: 1em;
    top: .4rem;
  }

  .pop-search .search-box input {
    font-size: .6rem;
    height: 1.4rem;
    padding: 0 0 0 .8rem;
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    border-radius: 1.5rem;
    /*  border: 1px solid #fff; */
    border: none;
    background-color: #f5f5f5;
  }

  .pop-search .search-bar .btn {
    font-size: .7rem;
    width: 2.5rem;
    padding-right: .3rem;
    text-align: center;
    display: block;
    color: #ff3034;
    position: absolute;
    right: 0;
    top: 0;
  }

  .pop-search .recommend {
    background-color: #f7f7f7;
    margin-top: -1px;
  }

  .pop-search .recommend .title {
    position: relative;
    padding: .5rem .5rem .0rem .5rem;
  }

  .pop-search .recommend .list {
    padding-left: .5rem;
    padding-top: .1rem!important;
    padding-bottom: .4rem;
    font-size: .6rem;
  }

  .pop-search .recommend .list:after {
    content: ".";
    clear: both;
    height: 0;
    visibility: hidden;
    display: block;
  }

  .pop-search .recommend .title:before {
    content: "";
    background-color: #e5e5e5;
    height: 1px;
    position: absolute;
    left: 0;
    right: 0;
    -webkit-transform: scaleY(.5);
    transform: scaleY(.5);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    top: 0;
  }

  .pop-search .recommend .list a {
    color: #8b8b8b;
    float: left;
    padding: .15rem .6rem;
    background-color: #fff;
    margin: 0 .4rem .4rem 0;
  }

  .g-hide {
    display: none!important;
  }

  .clear {
    font-size: 13px;
  }

  .clear span {
    font-size: 16px;
  }

  .clearCarHistory {
    position: relative;
    text-align: right;
    right: 5px;
    display: inline-block;
    float: right;
    color: #999999;
  }

  .icon-icon-- {
    position: relative;
    top: 1px;
  }

  .history {
    display: inline-block;
    font-size: 14px;
  }

  .hotCars {
    font-size: 14px;
  }
</style>